<template>
	<div class="Login">

		<div class="g-login">
			<img src="../../kbc/h5/img/css/common/logo.png">
		</div>
		<div class="m-login">
			<div class="login-field"><i class="iconfont">&#xe625;</i>
				<input :placeholder="$t('sign.acount')" type="text" v-model="userName">
			</div>
			<div class="login-field"><i class="iconfont">&#xe609;</i>
				<input label=" " :placeholder="$t('sign.pwd')" type="password" v-model="pwd">
				<!--<span v-if="sendMsgDisabled" class="code">{{time + '秒后获取'}}</span>
                    <span v-if="!sendMsgDisabled" class="code code-get" @click="send">免费获取验证码</span>-->
			</div>
			<!--<div class="login-field">
				<input placeholder="请输入您的验证码" type="text" maxlength="4" class="fl codes">
				<input type="text" maxlength="11" value="5689" class="fr codesed">
			</div>-->
			<button class="mint-button btn-login" v-on:click="registationClick">{{$t("sign.sign")}}</button>
			<div class="sponsor-box">
				中文 / EN
				<!--<select @change="chooseLang(value)">
					<option>中文</option>
					<option>EN</option>
				</select>-->
				<select @change="selectLangVal" v-model="selected">
			        <option v-for="item in lang" v-model="item.value">{{ item.value }}</option>
			    </select>
			</div>
		</div>
	</div>
</template>
<style>
	.head-portrait{ position: relative; width: 100%; display: flex; box-sizing: border-box; padding:3rem 1rem; background: #fff;font-size: 16px;}
	.portrait{ width: 60px; height: 60px;border-radius: 50%; overflow: hidden; float: right; position: absolute; top:1rem; right:1rem;}
	.registation{background:#fff;box-sizing: border-box; padding-top: 4rem; position: absolute; top:0;left:0;bottom: 0;right: 0; width: 100%; height: 100%;}
	/**登录**/
	.Login{position: absolute; top:0;left:0; top:0;bottom: 0; width: 100%; height: 100%;box-sizing: border-box;
	  background: url(../../kbc/h5/img/css/common/login_bg.png);
	  background-size: 100% 100%;
	}
	.Login .g-login{width: 100%;overflow: hidden;
	height: auto;margin: 0;padding:4rem 0;
	box-sizing: border-box;
	position: relative;
	background-size: 100%;}
	.Login .g-login img{ margin: 0 auto; width:80%; height:80%; display: block; max-width:150px;}
	.Login .btn-login{ width:83%;margin: 3rem auto 1rem; padding: 1rem 0; 
	display: block; background:#4e8bfe;border: 0; 
	color: #fff; font-size:1.6rem; border-radius:5px;}
	/**手机获取验证码**/
	.Login .code{ margin:0; padding:0; width:10rem;text-align: center; position:absolute;bottom:1.5rem;right:0.5rem; border:1px solid #eee; border-radius:5px;background: #eee;color: #999;height:3rem; line-height:3rem; font-size:1.3rem}
	.Login .code-get{background:#00CC66;color:#fff;text-align: center;height:3rem;border:1px solid #00CC66; line-height:3rem; font-size:1rem}
	.Login .page-part{margin-top:1rem; position: relative; overflow: hidden;}
	.Login .m-login{padding-bottom:2rem;}
	.Login .mint-field .mint-cell-title{ width: 42px;}
	.Login .mint-field-other{left:1.5rem;top:1.2rem;position: absolute; width: 42px;}
	.Login .mint-cell-wrapper{border-bottom: 1px solid #eee;background-image:none}
	.Login .login-field{ 
		  width:83%;
		  position: relative;
		   overflow: hidden;
		   margin: 0 auto 2rem;
		   color: #fff;
		   overflow: hidden;
		   }
	.Login .login-field input{ width:100%; border: 0;
	 height:3rem; line-height:3rem;line-height: normal; padding-left:4rem;font-size:1.2rem;
	 border: 1px solid #fff;
	 background:none;
	 box-sizing: border-box;
	 border-radius: 10px;
	 color: #fff;
	 }
	 .Login .login-field .codes{
	 	width:50%;
	 	color: #fff;
	 	text-align: left;
	 	padding:5px;
	 }
	 
	 .Login .login-field input::-webkit-input-placeholder,.Login .login-field  textarea::-webkit-input-placeholder{ color:#fff;}
	.Login .login-field  input:-moz-placeholder,.Login .login-field  textarea:-moz-placeholder { color:#fff;}
	.Login .login-field  input::-moz-placeholder,.Login .login-field  textarea::-moz-placeholder {color:#fff;}
	.Login .login-field  input:-ms-input-placeholder,.Login .login-field  textarea:-ms-input-placeholder{color:#fff;}
	 
	.Login .login-field .codesed{
	  	    width: 40%;
    padding: 0;
    text-align: center;
	  }
	.Login .login-field .iconfont{position: absolute;top:0.8rem;left: 1rem;font-size:1.3rem; color:#dcdcdc;}
    .Login .sponsor-box{text-align:right;color:#fff; padding-right:10px;
    width:92%;
    }
    .Login .sponsor-box select{
    	background:#eee;
    	border: 1px solid #eee;
    }
</style>
<script>
	import router from './../router';
	import util from './../js/util/util.js';
	import { Cell, Toast } from 'mint-ui';
	export default {
		data() {
			return {
				time: 60, // 发送验证码倒计时
				userName: '',
				pwd: '',
				sendMsgDisabled: false,
				reg: /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/, //手机验证码
				lang: [
					{value: '中文'},
					{value: 'EN'}
				],
				selected : this.$i18n.locale == 'en'?'EN':'中文'
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = false; //显示底部导航
		},
		components: {
			Cell
		},
		methods: {
			go: function(url) {
				util.pushRouter(router, url, {})
			},
			selectLangVal: function(ele) { //语言选择
				this.selected = ele.target.value;
				if(this.selected == "中文"){
	            	this.$i18n.locale = 'zh';
	            	util.setCookie("PLAY_LANG",'zh');
	            }else if(this.selected == "EN"){
	            	this.$i18n.locale = 'en';
	            	util.setCookie("PLAY_LANG",'en');
	            }
			},
			registationClick: function() {
				let userName = this.userName;
				let pwd = this.pwd;
				if(!userName || userName.length == 0) {
					Toast(this.$t('sign.acount'));
					return false;
				}
				if(!pwd || pwd.length == 0) {
					Toast(this.$t('sign.pwd'))
					return false;
				}
				//	                if (!this.reg.test(phoneNum)) {
				//	                    Toast('手机号格式不正确！')
				//	                    return false;
				//	                }

				//      		  if(!verifyCode || verifyCode.length < 4){
				//      		  	Toast('请输入正确的六位数验证码！')
				//	                return false;
				//      		  }

				util.Ajax('/kbc/toLogin', "POST", {
					"username": userName,
					"password": pwd
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							util.pushRouter(router, '/kbc/h5/home');
						} else {
							Toast(data.msg);
						}
					}
				})

			},
		},
		mounted: function() { //加载完成后执行
		}
	}
</script>